<template>
  <div>
    <div class="limiter">
      <div class="container-table100">
        <div class="wrap-table100">
          <div>
            <div class="orderHeader">
              <el-form :inline="true" class="demo-form-inline flexAlginCenter">
                <el-form-item>
                  <el-input placeholder="请输入应用名称" class="input-with-select" v-model="nameKey">
                    <el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
                  </el-input>
                </el-form-item>
              </el-form>
              <div class="right_box">
                <div class="info">
                  <!-- 上传限制 start -->
                  <div class="upload_limit">
                    <div style="font-size:17px; font-weight:bold;margin-left: -15px;">{{ upInfo.singlesize }}M</div>
                    <div style="font-size:12px; color:#B7AFAF">上传限制<img style="margin-left:8px;margin-top: -1px;"
                        :src="pageUrl" alt="" />
                    </div>
                  </div>
                  <div class="allSize_Box">
                    <div class="allSize_Box_data">
                      <div class="allSize_Box_data_c">
                        <div class="circle1"></div>
                        <div class="allSize_Box_data_d">
                          <div style="font-size:17px; font-weight:bold;margin-left: -18px;">{{ upInfo.uploadedsize }}M
                          </div>
                          <div style="font-size:12px; color:#B7AFAF">&nbsp;&nbsp;&nbsp;&nbsp;已用<img
                              style="margin-left:5px;margin-top: -1px;" :src="pageUrl" alt="" /></div>
                        </div>
                      </div>
                      <div class="allSize_Box_data_c">
                        <div class="circle2"></div>
                        <div class="allSize_Box_data_d">
                          <div style="font-size:17px; font-weight:bold;margin-left: -18px;">{{ upInfo.allowsize }}M
                          </div>
                          <div style="font-size:12px; color:#B7AFAF">存储总量<img style="margin-left:5px;margin-top: -1px;"
                              :src="pageUrl" alt="" /></div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <el-progress :percentage="upInfo.uploadedP" :stroke-width="8" :format="format"></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table100">
            <table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
              <thead>
                <tr class="table100-head">
                  <th class="column1">名称</th>
                  <th class="column2">版本号</th>
                  <th class="column3">大小</th>
                  <th class="column4">网站链接</th>
                  <th class="column5">有效期至</th>
                  <th class="column6">类型</th>
                  <th class="column7">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in tableList" v-bind:key="index">
                  <td class="column1">
                    <div class="app_name">
                      <div class="appurl" style="border-radius: 4px;">
                        <a><img :src="item.zxlogo" alt="" style="border-radius: 4px;" /></a>
                      </div>
                      <div class="name-text">
                        <el-tooltip class="item" effect="dark" placement="top">
                          <div slot="content">{{item.nickname}}</div>
                          <a>
                            <div style="font-size:16px;color:#fff;font-weight:600;text-align: left;" class="nickname">
                              {{ item.nickname }}
                            </div>
                          </a>
                        </el-tooltip>
                        <div class="banb">{{ item.appTypeDes }}</div>
                      </div>
                    </div>
                  </td>
                  <td class="column2">
                    {{ item.hversion }}
                  </td>
                  <td class="column3">
                    <div>{{ item.zsize }}</div>
                  </td>
                  <td class="column4">
                    <div class="copy_link">
                      <div class="copy" style="
                                      white-space: nowrap;
                                      overflow: hidden;
                                      text-overflow: ellipsis;
                                      width: 150px;
                                    ">
                        <el-tooltip class="item" effect="dark" placement="bottom">
                          <div slot="content">{{item.web}}</div>
                          <el-button class="link_button">{{ item.web }}</el-button>
                        </el-tooltip>
                      </div>
                      <el-button type="text" class="copy_button" v-clipboard:copy="item.web"
                        v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </div>
                  </td>
                  <td class="column5">
                    <div>{{ item.super_endtime }}</div>
                  </td>
                  <td class="column6">
                    <div>{{ item.statusText }}</div>
                  </td>
                  <td class="column7">
                    <el-button type="text" size="small" data-toggle="modal" data-target="#exampleModal"
                      data-whatever="@mdo" @click="getupTxt(item)" class="blue">下载</el-button>
                    <span class="wire">|</span>
                    <el-button type="text" size="small" class="blue"> <a @click="gotodown(item.shorturl_str)">查看</a>
                    </el-button>
                    <span class="wire">|</span>
                    <el-button type="text" size="small" @click="goUrl('/iosVisaFree','iosVisaFree',item.id,item)"
                      class="blue">编辑
                    </el-button>
                    <span class="wire">|</span>
                    <el-button type="text" size="small"
                      @click="goUrlContinue('/payIosVisaFree','payIosVisaFree',item.id)" class="blue">续费
                    </el-button>
                    <span class="wire">|</span>
                    <el-button type="text" size="small" @click="deleteItem(item.id)" id="red">删除</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="pages">
      <el-pagination small :page-size="pageSize" background layout="prev, pager, next" :total="total"
        @current-change="currentchange">
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">下载应用</h4>
          </div>
          <div class="modal-body"
            style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
              <el-button type="primary"><a target="_blank" :href=Html download="app.html">下载app.html文件</a></el-button>
              <el-button type="primary"><a target="_blank" :href=upxt>直接下载应用</a></el-button>
            </div>
            <div class="tishi">
              <div class="wen">温馨提示：</div>
              <ul>
                <li>若要隐藏头部网址，需要下载app.html文件，放在网站根目录，此文件名称必须为app.html，不能改名。</li>
                <li>如需技术支持，请联系客服，我们提供付费服务。</li>
              </ul>
            </div>
            <div class="modal-footer">
              <el-button type="button" class="btn-default" data-dismiss="modal">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import filters from "../../utils/filters";
  import mergeApp from "@/components/adhibitionMember/mergeApp"; //合并应用
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      mergeApp
    },
    data() {
      //这里存放数据
      return {
        nameKey: "", //需要搜索的key
        pageNum: 1, //当前页
        pageSize: 7, //每页多少条
        tableList: [], //单页显示的数据
        upInfo: {}, //已上传信息
        pageUrl: "../../../static/上传限制44.png",
        tableData: [], //后台给的list数据
        upxt: '', //直接下载
        downHtmlUrl: '', //下载app.html文件
        loading: false, //表格加载
        total: 0, //数据总数 分页
        id: '', //下载标识
        Html: "",

      };
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList();
      window.addEventListener("resize", this.handleResize);

      // console.log(this.c_appID, "id");
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      //获取屏幕宽度
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = window.screenWidth;
        })();
      };
    },

    //方法集合
    methods: {

      //存条
      format(percentage) {
        let sum = this.tableData.reduce((a, b) => {
          // console.log(a, b, "sum");
          return a + b.size;
        }, 0);

        this.sums = sum / 5;
        // console.log(this.sums);
        if (percentage == 100) {
          return percentage == 100 ? "满" : `${percentage}M`;
        }
      },
      // 监听页码改变的事件
      currentchange(newpage) {
        this.pageNum = this.pageNum;
        this.tableList = this.tableData.slice(
          (newpage - 1) * this.pageSize,
          newpage * this.pageSize
        );
      },

      goUrl(path, name, appID, item) {
        sessionStorage.setItem("setMenuIndex_appPackaging", 0);
        this.$router.push({
          path: path,
          name: name,
          query: {
            appID: appID,
            item: JSON.stringify(item)
          },
        });
        location.reload();
      },
      goUrlContinue(path, name, appID, code) {
        this.$router.push({
          path: path,
          name: name,
          query: {
            appID: appID,
            code: 700,
          },
        });
      },

      getupTxt(item) {
        this.upxt = item.uptxt;
        this.downHtmlUrl = item.downHtmlUrl;
        this.id = item.id;
        this.Html = 'https://api.lumayun.com/api/Nosign/downHtmlByID/appid/' + this.id;
      },
      //查看
      gotodown(shorturl) {
        var temp = window.open('_blank')
        // temp.location.href = "https://down.lmffw.com/"+ encodeURIComponent(shorturl);
        temp.location.href = shorturl;
      },

      //获取列表数据
      getList() {
        this.loading = true;
        var params = new URLSearchParams();
        params.append("nameKey", this.nameKey);
        params.append("pageNum", this.pageNum);
        params.append("pageSize", this.pageSize);
        this.$post(this.API.lists, params).then((res) => {
          console.log(res, "123");
          if (res) {
            this.loading = false;
            let data = res.data;
            this.tableData = data.list;
            this.upInfo = data.upInfo;
            this.total = this.tableData.length;
            // console.log(data.list.shorturl);
            this.currentchange(1);
          }
        });
      },

      getAppHtml() {

      },

      //删除item
      deleteItem(itemId) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            var params = new URLSearchParams();
            params.append("appid", itemId);
            // params.append('pageNum', 'forgot');
            this.$post(this.API.Application_delete, params).then((res) => {
              if (res) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                location.reload();
              }
            });
          })
          .catch(() => {});
      },
      // 复制成功
      onCopy(e) {
        // console.log(e);
        this.$message({
          type: "success",
          message: "复制成功!",
        });
      },
      // 复制失败
      onError(e) {
        alert("失败");
      },

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      screenWidth(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = val;
          this.timer = true;
          let that = this;
          setTimeout(function () {
            // 打印screenWidth变化的值

            that.timer = false;
          }, 400);
        }
      },
    },
  };

</script>
<style scoped>
  div>>>.el-button--default {
    border: none;
  }

  div>>>.el-button--default i {
    color: #afadab;
  }

  .modal-footer {
    border: none !important;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .tishi {
    width: 380px;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px dashed #ff4444;
    margin-top: 32px;
  }

  .wen {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FF4444;
    line-height: 20px;
    margin-left: 6px;
    padding-top: 6px;
  }

  ul {
    list-style-type: decimal;
    margin-left: -8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  a:hover {
    text-decoration: none !important;
    color: #000;
  }

  div>>>.modal button {
    background-color: #1890FF !important;
    color: #fff;
  }

  .modal a {
    color: #fff;
  }

  .nickname {
    width: 80px;
    /*根据自己项目进行定义宽度*/
    overflow: hidden;
    /*设置超出的部分进行影藏*/
    text-overflow: ellipsis;
    /*设置超出部分使用省略号*/
    white-space: nowrap;
    /*设置为单行*/
  }

  .app_name {
    display: flex;
    margin-left: 10px;
  }

  .name-text {
    margin-left: 10px;
  }

  .copy_link {
    display: flex;
    align-items: center;
  }

  body,
  html {
    height: 100%;
    font-family: sans-serif;
  }

  input {
    display: block;
    outline: none;
    border: none !important;
  }

  textarea {
    display: block;
    outline: none;
  }

  textarea:focus,
  input:focus {
    border-color: transparent !important;
  }

  button {
    outline: none !important;
    border: none;
    background: transparent;
  }

  button:hover {
    cursor: pointer;
  }

  iframe {
    border: none !important;
  }

  .content {
    margin: 30px 0px 30px 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  .limiter {
    width: 100%;
    margin: 0 auto;
  }

  .container-table100 {
    width: 100%;
    /* min-height: 100vh; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .container-table101 {
    width: 100%;
    min-height: 100vh;
    border-radius: 4px 0px 0px 4px;
  }

  .wrap-table100 {
    width: 1170px;
  }

  table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  table * {
    position: relative;
    background-color: #0f0f0f;
  }

  table td,
  table th {
    padding-left: 8px;
  }

  table thead tr {
    height: 60px;
    border-bottom: 1px solid #272727;

  }

  table tbody tr {
    height: 100px;
    border-bottom: 1px solid #272727;
  }

  table td,
  table th {
    text-align: center;
  }

  table td.l,
  table th.l {
    text-align: center;
  }

  table td.c,
  table th.c {
    text-align: center;
  }

  table td.r,
  table th.r {
    text-align: center;
  }

  .table100-head th {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 14px;
    font-weight: unset;
  }

  table tr td {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
  }

  .banb {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8F8F8F;
    line-height: 14px;
    text-align: left;
  }

  tbody tr {
    border-bottom: 1px solid #E6E6E6;
    /* border-left: 1px solid #E6E6E6; */
  }

  tbody tr {
    font-size: 15px;
    color: #808080;
    line-height: 1.2;
    font-weight: unset;
  }

  tbody tr:hover {
    color: #555555;
    background-color: #f5f5f5;
    cursor: pointer;
  }

  .column1 {
    width: 155px;
  }

  .column2 {
    width: 69px;
    color: #FFFFFF;
  }

  .column3 {
    width: 69px;
    color: #FFFFFF;
  }

  .column4 {
    width: 207px;
    color: #FFFFFF;
  }

  .column5 {
    width: 108px;
    color: #FFFFFF;
  }

  .column6 {
    width: 69px;
    color: #FFFFFF;
  }

  .orderHeader {
    display: flex;
    justify-content: space-between;
    height: 80px;
    padding: 18px 20px;
    border-bottom: 1px solid #272727;
    /* border-left: 1px solid #E6E6E6; */
  }

  .flexJustifyStart {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .block>>>.el-date-editor .el-range__icon {
    margin-left: -5px !important;
    line-height: 18px !important;
  }

  .orderHeader>>>.el-form-item__content {
    line-height: 40px !important;
  }

  .flexAlginCenter {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .orderBody {
    height: 550px;
  }

  div>>>.el-card {
    border: none;
  }

  div>>>.el-progress-bar {
    width: 260px;
    margin-top: 8px;
    margin-left: 20px;
  }

  /* 按钮 */
  div>>>.preview {
    background-color: #ff7226;
    color: #fff;
    border: 2px solid #ff7226;
  }

  .preview:hover {
    border: 2px solid #ff7226;
    background-color: #fff;
    color: #ff7226;
  }

  div>>>.el-dropdown {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px;
    text-align: center;
  }

  div>>>.el-input-group__append {
    background-color: transparent;
    color: #000;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    padding: 0 20px;
    white-space: nowrap;
    font-size: 16px;
    border-color: #272727;
  }

  div>>>.el-card__body {
    padding: 0px;
    text-align: center;
    /* overflow: auto; */
  }

  div>>>.el-card.is-always-shadow {
    box-shadow: none;
  }

  div>>>.cell {
    text-align: center;
  }

  a {
    text-decoration: none;
  }

  div>>>.el-button--text {
    color: #fff;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  div>>>.el-button--text a {
    color: #1890FF;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  div>>>#red {
    color: #FF2A2A;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  /* div>>>.el-button--text:hover {
      color: #FF7226;
    } */

  div>>>.el-table__body-wrapper {
    overflow-x: auto;
  }

  div>>>.el-input-group {
    width: 220px;
  }

  div>>>.el-input-group input {
    background-color: #1d1d1d;
    color: #FFFFFF;
    border-color: #272727;
  }

  div>>>.el-input-group input:focus {
    border-color: #272727;
  }

  .wire {
    color: #A5A5A5;
  }

  /* 云币余额 限制 */
  .right_box {
    display: flex;
  }

  .upload_limit {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
    color: #FFFFFF;
  }

  .allSize_Box {
    display: flex;
    flex-direction: column;
  }

  .allSize_Box_data {
    display: flex;
  }

  .allSize_Box_data_c {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .allSize_Box_data_d {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
    color: #FFFFFF;
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
  }

  .intel {
    position: absolute;
    top: 55px;
    left: 666px;
  }

  .circle1 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #ff7226;
    margin-right: 18px;
  }

  .circle2 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #ffdbc7;
    margin-left: 2px;
  }

  div>>>.el-progress-bar__inner {
    background-color: #ff7226;
  }

  div>>>.el-progress-bar__outer {
    background-color: #ffdbc7;
  }

  .cell span {
    width: 1px;
    /*根据自己项目进行定义宽度*/
    overflow: hidden;
    /*设置超出的部分进行影藏*/
    text-overflow: ellipsis;
    /*设置超出部分使用省略号*/
    white-space: nowrap;
    /*设置为单行*/
  }

  .box1 {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* border-right: 1px solid #E0E0E0; */
  }

  .box1:first-child {
    border-right: 1px solid #e0e0e0;
  }

  .box2 {
    margin: 0px 20px;
  }

  .link_button {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 16px;
    width: 170px;
    overflow: hidden;
    /*设置超出的部分进行影藏*/
    text-overflow: ellipsis;
    /*设置超出部分使用省略号*/
    white-space: nowrap;
    /*设置为单行*/
  }

  div>>>.copy_button {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FF7226;
    line-height: 12px;
    margin-left: 12px;
  }

  /* 分页 */

  div>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff7226 !important;
    color: #fff;
  }

  div>>>.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #ff7226;
    color: #fff;
  }

  div>>>div[data-v-4dc1f2ac] .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff7226 !important;
    color: #fff;
  }

  .pages {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* 媒体查询 */
  @media (max-width: 1199px) {
    .info {
      display: none;
    }

    .container-table101 {
      min-height: 0vh;
    }
  }

  @media screen and (max-width: 992px) {

    .container-table101 {
      min-height: 0vh;
    }

    table {
      display: block;
    }

    table>*,
    table tr,
    table td,
    table th {
      display: block;
    }

    table thead {
      display: none;
    }

    table tbody tr {
      height: auto;
      padding: 37px 0;
    }

    table tbody tr td {
      padding-left: 36% !important;
      margin-bottom: 24px;
    }

    table tbody tr td:last-child {
      margin-bottom: 0;
    }

    table tbody tr td:before {
      font-size: 14px;
      color: #999999;
      line-height: 1.2;
      font-weight: unset;
      position: absolute;
      width: 40%;
      left: 30px;
      top: 0;
    }

    table tbody tr td:nth-child(1):before {
      content: "名称";
    }

    table tbody tr td:nth-child(2):before {
      content: "大小";
    }

    table tbody tr td:nth-child(3):before {
      content: "下载量";
    }

    table tbody tr td:nth-child(4):before {
      content: "下载链接";
    }

    table tbody tr td:nth-child(5):before {
      content: "CDN加速器";
    }

    table tbody tr td:nth-child(6):before {
      content: "状态";
    }

    table tbody tr td:nth-child(7):before {
      content: "操作";
      display: flex;

      align-items: center;
    }

    .column1,
    .column2,
    .column3,
    .column4,
    .column5,
    .column6,
    .column7 {
      text-align: left;
    }

    .column4,
    .column5,
    .column6,
    .column1,
    .column2,
    .column3 {
      width: 100%;
    }

    tbody tr {
      font-size: 14px;
    }

    .container-table101 {
      min-height: 0vh;
    }

    div>>>.copy_button {
      margin-top: -10px;
      margin-left: 10px;
    }

    div>>>.link_button {
      margin-top: -10px;
      margin-left: -20px;
    }

    .app_name {
      margin-left: 0px;

    }
  }

  @media (max-width: 768px) {}

  @media (max-width: 576px) {

    .container-table101 {
      min-height: 0vh;
    }

    .orderHeader {
      border-left: none !important;
    }

  }

  @media (max-width: 414px) {
    .flexAlginCenter {
      display: none;
    }
  }

  .appurl img {
    width: 48px;
    height: 48px;
  }

  div>>>.link_button:hover {
    background-color: transparent;
  }

  .limiter>>>.el-loading-mask .el-loading-spinner .el-icon-loading {
    color: #ff7226;
  }

  .limiter>>>.el-loading-mask .el-loading-spinner .el-loading-text {
    color: #ff7226;
  }

</style>
